<template>
  <n-modal
    v-model:show="showModal"
    :show-icon="false"
    preset="dialog"
    :title="title"
    :style="{ width: props.width + 'px' }"
    @update:show="handleUpdateShow"
  >
    <n-spin :show="modalLoading" content-class="max-h-[80vh] overflow-auto pr-2">
      <n-form :model="formData" :rules="formRules" ref="formRef" label-width="auto" label-placement="top">
        <n-grid :cols="2" :x-gap="24">
          <n-form-item-gi label="用户名称" path="usrNm">
            <n-input placeholder="请输入用户名称" v-model:value="formData.usrNm" />
          </n-form-item-gi>
          <n-form-item-gi label="手机号码" path="moblNo">
            <n-input placeholder="请输入手机号码" v-model:value="formData.moblNo" />
          </n-form-item-gi>
          <n-form-item-gi label="电子邮箱" path="mailNo">
            <n-input placeholder="请输入电子邮箱" v-model:value="formData.mailNo" />
          </n-form-item-gi>
          <n-form-item-gi label="昵称" path="nickNm">
            <n-input placeholder="请输入昵称" v-model:value="formData.nickNm" />
          </n-form-item-gi>
          <n-form-item-gi label="性别代码" path="genderCd">
            <n-input placeholder="请输入性别代码" v-model:value="formData.genderCd" />
          </n-form-item-gi>
          <n-form-item-gi label="生日" path="birthDt">
            <n-input placeholder="请输入生日" v-model:value="formData.birthDt" />
          </n-form-item-gi>
          <n-form-item-gi label="地区编码" path="distCd">
            <n-input placeholder="请输入地区编码" v-model:value="formData.distCd" />
          </n-form-item-gi>
          <n-form-item-gi label="地区名称" path="distNm">
            <n-input placeholder="请输入地区名称" v-model:value="formData.distNm" />
          </n-form-item-gi>
          <n-form-item-gi label="用户头像" path="avtrUrl">
            <n-input placeholder="请输入用户头像" v-model:value="formData.avtrUrl" />
          </n-form-item-gi>
          <n-form-item-gi label="个性签名" path="persnSign">
            <n-input placeholder="请输入个性签名" v-model:value="formData.persnSign" />
          </n-form-item-gi>
          <n-form-item-gi label="最后登录IP" path="lastLoginIp">
            <n-input placeholder="请输入最后登录IP" v-model:value="formData.lastLoginIp" />
          </n-form-item-gi>
          <n-form-item-gi label="最后登录时间" path="lastLoginTm">
            <n-input placeholder="请输入最后登录时间" v-model:value="formData.lastLoginTm" />
          </n-form-item-gi>
          <n-form-item-gi label="启用标志" path="enableFlg">
            <n-input placeholder="请输入启用标志" v-model:value="formData.enableFlg" />
          </n-form-item-gi>
          <n-form-item-gi label="激活标志" path="actvFlg">
            <n-input placeholder="请输入激活标志" v-model:value="formData.actvFlg" />
          </n-form-item-gi>
          <n-form-item-gi label="注册标志" path="rgstFlg">
            <n-input placeholder="请输入注册标志" v-model:value="formData.rgstFlg" />
          </n-form-item-gi>
          <n-form-item-gi label="删除标志" path="delFlg">
            <n-input placeholder="请输入删除标志" v-model:value="formData.delFlg" />
          </n-form-item-gi>
          <n-form-item-gi label="超管标志" path="saFlg">
            <n-input placeholder="请输入超管标志" v-model:value="formData.saFlg" />
          </n-form-item-gi>
          <n-form-item-gi :span="2" label="备注" path="rmrk">
            <n-input placeholder="请输入备注" v-model:value="formData.rmrk" type="textarea" :autosize="{ minRows: 3, maxRows: 5 }" />
          </n-form-item-gi>
        </n-grid>
      </n-form>
    </n-spin>
    <template #action>
      <n-space>
        <n-button @click="() => handleUpdateShow(false)">取消</n-button>
        <n-button v-if="hasPermission('bmpus:usr:save', '保存用户')" type="info" :loading="saveBtnLoading" @click="handleSave">
          <template #icon>
            <n-icon>
              <SaveOutlined />
            </n-icon>
          </template>
          保存
        </n-button>
      </n-space>
    </template>
  </n-modal>
</template>

<script lang="ts" setup>
import { reactive, ref, unref, watch } from 'vue';
import type { FormRules, FormInst } from 'naive-ui';
import { SaveOutlined } from '@vicons/antd';
import type * as BMPUS from '@yanfan/bmpus-tsapi/types';
import { usrGet, usrSav } from '@yanfan/bmpus-tsapi/usr';
import { usePermission } from '@yanfan/common/hooks';

defineOptions({
  name: 'BmpusUsrEdit',
  titl: '用户编辑',
});

const props = withDefaults(
  defineProps<{
    show: boolean;
    width?: number;
    bizId: string | null;
  }>(),
  {
    show: false,
    width: 530,
  },
);

const emits = defineEmits<{
  (e: 'update:show', show: boolean): void;
  (e: 'refresh'): void;
}>();

class FormData {
  usrId: string = '';
  usrNm: string = '';
  moblNo: string = '';
  mailNo: string = '';
  nickNm: string = '';
  genderCd: string = '';
  birthDt: number = 0;
  distCd: string = '';
  distNm: string = '';
  avtrUrl: string = '';
  persnSign: string = '';
  lastLoginIp: string = '';
  lastLoginTm: number = 0;
  enableFlg: number = 0;
  actvFlg: number = 0;
  rgstFlg: number = 0;
  delFlg: number = 0;
  saFlg: number = 0;
  rmrk: string = '';
}

const formRules: FormRules = {
  usrNm: {
    required: true,
    trigger: ['blur', 'input'],
    message: '请输入用户名称',
  },
  nickNm: {
    required: true,
    trigger: ['blur', 'input'],
    message: '请输入昵称',
  },
};

const { hasPermission } = usePermission();
const modalLoading = ref(false);
const title = ref('新建');
const formRef = ref<FormInst | null>(null);
const showModal = ref(false);
const saveBtnLoading = ref(false);
const formData = reactive(new FormData());

watch(
  () => unref(props).show,
  (show) => {
    showModal.value = show;
    if (showModal.value) {
      if (props.bizId) {
        title.value = '编辑';
        modalLoading.value = true;
        usrGet({ usrId: props.bizId })
          .then((data: BMPUS.UsrGetOutput) => {
            Object.assign(formData, data);
          })
          .finally(() => {
            modalLoading.value = false;
          });
      } else {
        title.value = '新建';
        Object.assign(formData, new FormData());
      }
    }
  },
);

function handleUpdateShow(value: boolean) {
  emits('update:show', value);
}

function handleSave() {
  saveBtnLoading.value = true;
  formRef.value
    ?.validate()
    .then(() => {
      usrSav(formData).then((data: BMPUS.UsrSavOutput) => {
        if (data.success) {
          formData.usrId = data.usrId;
          handleUpdateShow(false);
          window.$message.success('保存成功');
          emits('refresh');
        } else {
          window.$message.error(data.errmsg);
        }
      });
    })
    .catch(() => {
      window.$message.error('请填写完整信息');
    })
    .finally(() => {
      saveBtnLoading.value = false;
    });
}
</script>

<style lang="less" scoped></style>
